<template>
  <div>
    <!-- 页面头部 -->
    <van-nav-bar
      title="发表文章"
      style="font-weight: bold"
      @click-left="goHome"
      fixed
    >
      <!-- @click-right="Article" -->
      <template #left>
        <van-icon name="revoke" color="#fdc03a" size="20" />
      </template>
      <template #right>
        <button class="btn" @click="submit">发表</button>
      </template>
    </van-nav-bar>

    <!-- 主体表单 -->
    <van-form style="margin: 0 12px 0 12px">
      <!-- 标题 -->
      <van-cell-group>
        <van-field
          v-model="title"
          label="标题"
          placeholder="请输文章标题"
          maxlength="20"
          colon
          clearable
          onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
          style="margin-top: 47px"
        />
      </van-cell-group>

      <!-- 分类选择 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="分类"
        placeholder="点击选择分类"
        @click="showPicker = true"
        colon
        clear-trigger
        onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <!-- 景点名称 -->
      <van-cell-group>
        <van-field
          v-model="lname"
          label="景点"
          placeholder="请输景点名称"
          maxlength="15"
          colon
          clearable
          onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
        />
      </van-cell-group>

      <!-- 简介 -->
      <van-cell-group>
        <van-field
          v-model="lsyn"
          label="简介"
          placeholder="请输简介内容"
          type="textarea"
          maxlength="50"
          colon
          clearable
          onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
        />
      </van-cell-group>

      <!-- 文章输入 -->
      <van-cell-group>
        <van-field
          id="input"
          v-model="dtext"
          rows="5"
          autosize
          type="textarea"
          maxlength="600"
          placeholder="这一刻的想法......"
          show-word-limit
          clearable
          onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
        />
      </van-cell-group>

      <!-- 上传图片 -->
      <van-cell-group class="tupian" style="margin-left: 12px">
        <div style="margin-right: 10px; font-size: 14px; color: #646566">
          上传图片:
        </div>
        <el-upload
          class="avatar-uploader"
          :limit="1"
          action="http://39.108.211.154:8080/upload_travel"
          name="uploadFile"
          list-type="picture-card"
          :on-success="onSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      data: "",
      title: "", //标题数据
      value: "", //分类
      ltypeid: "", //分类数据
      columns: ["北方秋色", "南方美景", "东部风情", "西北天地"],
      showPicker: false,
      dtext: "", //文章详情数据
      lname: "", //地点数据
      lsyn: "", //简介数据
    };
  },
  watch: {
    // 获取标题数据
    title() {
      console.log(this.title);
    },

    // 获取景点数据
    lname() {
      console.log(this.lname);
    },

    // 获取简介数据
    lsyn() {
      console.log(this.lsyn);
    },

    // 获取文章内容数据
    dtext() {
      console.log("文章内容:", this.dtext);
    },

    // 监听id
    Id() {
      this.axios
        .get(`http://39.108.211.154:8080/det_img_did?dimg=${this.urlS}`)
        .then((res) => {
          console.log(res);
          this.data = res.data;
        });
    },
  },
  mounted() {
    // 获取用户名
    this.axios
      .get(
        `http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`
      )
      .then((res) => {
        console.log(res);
        this.userlist = res.data;
        console.log(this.userlist[0]);
      });
  },
  methods: {
    // 返回首页
    goHome() {
      this.$router.push("/index");
    },

    // 获取分类数据
    onConfirm(value) {
      this.value = value;
      this.ltypeid = this.value;
      console.log("分类:", this.ltypeid);
      this.showPicker = false;
    },

    // 图片
    onSuccess(resp, flie, filelist) {
      console.log(resp);
      let url = resp.urls[0]; //上传的图片的访问链接地址

      this.urlS = resp.urls[0];
      console.log(this.urlS);
    },

    // 提交按钮
    submit() {
      if (
        this.title == "" ||
        this.ltypeid == "" ||
        this.dtext == "" ||
        this.lname == "" ||
        this.lsyn == ""
      ) {
        console.log(
          this.title,
          this.ltypeid,
          this.dtext,
          this.lsyn,
          this.lname
        );
        Toast.fail({
          message: "发表失败...",
          icon: "clear",
          forbidClick: true,
        });
        return true;
      } else {
        // 详情
        let params = `d_uname=${this.userlist[0].uname}&dtitle=${this.title}&dtext=${this.dtext}&dimg=${this.urlS}`;
        // console.log(params);
        let url = `http://39.108.211.154:8080/write_detail`;
        this.axios.post(url, params).then((res) => {
          // console.log(res);
          // this.data = res.data;
        });

        // 请求id
        this.axios
          .get(`http://39.108.211.154:8080/det_img_did?dimg=${this.urlS}`)
          .then((res) => {
            console.log(res);

            // 列表
            let paramss = `ltypeid=${this.ltypeid}&lname=${this.lname}&title=${this.title}&lsyn=${this.lsyn}&limg=${this.urlS}&l_uname=${this.userlist[0].uname}&lid=${res.data[0].did}`;
            console.log("id:", res.data[0].did);
            console.log("paramss:", paramss);
            let urll = `http://39.108.211.154:8080/write_travel`;
            this.axios.post(urll, paramss).then((res) => {
              console.log(res);
              this.data = res.data;
            });

            // 提示
            Toast.success("发表成功");

            // 发布成功,跳转详请
            this.$router.push(`/detail?id=${res.data[0].did}`);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  background: #fdc03a;
  border-radius: 8px;
  color: #fff;
  padding: 3px 10px;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 10px 3px 10px rgb(255, 111, 0);
  border: none;
}
.tupian {
  display: flex;
  padding-top: 10px;
}

.avatar-uploader {
  display: block;
  width: 148px;
  height: 148px;
  overflow: hidden;
}
</style>
    

